import React, { Component } from 'react';
import { List } from 'immutable';
import classNames from 'classnames';
import Image from 'components/Image'
import { Row, Col, Button, Icon } from 'antd';

export default class ItemOrders extends Component {
    static defaultProps = {
        itemOrders: List()
    };

    constructor(props){
        super(props);

        this.state = {
            open:false
        }
    }

    render() {
        const { itemOrders } = this.props;
        const { open } = this.state;
        let list = List.of();
        if(open){
            list = itemOrders.sortBy(item => item.get('isGift'));
        }else{
            list = itemOrders.sortBy(item => item.get('isGift')).slice(0,1);
        }
        return (
            <div className="order-goods-list">
                {
                    list.map(this.renderItems)
                }
                {
                    itemOrders.count() > 1 ? (
                         <a href="javascript:void(0);">
                            <Icon 
                                className="list-ct t-grayer"
                                type={open ? 'up' : 'down'}
                                onClick={this.showMore} 
                            />
                        </a>
                    ) : null
                }
               
            </div>
        )
    }

    renderItems(item,index){
        let tempArr = [];
        let specState = classNames('t-grayer good-specification', {
            hide: !item.get('productSpecification')
        });

        if (index != 0) {
            tempArr.push(<div className="split-line" />)
        }

        let itemDom = (
            <div key={index} className="order-goods-item">
                <Row>
                    <Col span="18">
                        <div className="order-goods-info">
                            <Image  src={item.get('picUrl')} alt={item.get('itemName')} width={70} height={70} />
                            <p className="good-name">
                                {
                                    item.get('isGift') == 1 ? <span className="t-red">[赠品]</span> : null
                                }
                                {item.get('itemName')}
                            </p>
                            <p className={specState} title={item.get('productSpecification')}>{`规格：${item.get('productSpecification')}`}</p>
                        </div>
                    </Col>
                    <Col span="6">
                        <div className="goods-price t-right">
                            <p className="real-price">&yen;{item.get('pervalue').toFixed(2)}</p>
                            <p className="price t-grayer">
                            {item.get('salePrice') ? (

                                item.get('pervalue').toFixed(2) == item.get('salePrice').toFixed(2) ?
                                null : <del>&yen;{item.get('salePrice').toFixed(2)}</del>
                                )
                                :
                                null
                            }
                                
                            </p>
                            <p>&times;{item.get('itemNumber')}</p>
                        </div>
                    </Col>
                </Row>
            </div>
        );
        tempArr.push(itemDom);

        return tempArr;
    }

     /**
     * 展示更多商品信息
     */
    showMore = () => {
        this.setState({
            open: !this.state.open
        })
    }
}